<template>
  <img @mousedown="startRecoder" @mouseup="sendVoice" src="../assets/image/voiceMsgIcon.png" alt="voiceMsg" />
</template>

<script>
import ConstUrl from '../const.json'
export default {
  props: ['jsonPkg1'],
  data () {
    return {
      jsondata: {
        commonKey: 100,
        appKey: 4,
        userID: this.$q.cookies.get('userID'),
        data: {
          senderID: this.$q.cookies.get('userID'),
          receiverID: null,
          msgType: null,
          groupID: null,
          lastDialogID: null,
          textMsg: null,
          contentType: 2
        }
      }
    }
  },

  methods: {
    initData () {
      this.jsondata.data.msgType = this.jsonPkg1.data.msgType
      this.jsondata.data.receiverID = this.jsonPkg1.data.receiverID
      this.jsondata.data.lastDialogID = this.jsonPkg1.data.lastDialogID
      this.jsondata.data.groupID = this.jsonPkg1.data.groupID
    },
    startRecoder () {
      this.initData()
      window.HZRecorder.get(function (res) {
        window.recorder = res
        window.recorder.start()
      })
    },
    getVoiceBlob () {
      let data = new FormData()
      data.append('gdData', JSON.stringify(this.jsondata))
      data.append('mediaFile', window.recorder.getBlob())
      return data
    },
    sendVoice () {
      let voiceBlob = this.getVoiceBlob()
      this.$http({
        url: ConstUrl.url,
        method: 'post',
        data: voiceBlob,
        headers: {
          processData: false
        }
      })
        .then(function (res) {
          console.log('success: ' + res)
        })
        .catch(function (error) {
          console.log('error: ' + error)
        })
    }
  }
}
</script>
